<template>
  <MenuItem v-slot="{ active }" v-bind="$attrs">
    <div
      :class="[
        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
        'group flex items-center px-4 py-2 text-sm font-normal cursor-pointer',
      ]"
      @click="clickFun"
    >
      <slot :active="active" />
    </div>
  </MenuItem>
</template>

<script setup>
import { MenuItem } from '@headlessui/vue'
import { useRouter } from 'vue-router'

const prop = defineProps({
  path: {
    type: String,
    required: false
  },
})

const router = useRouter()

function clickFun() {
  if (prop.path) {
    router.push(prop.path)
  }
  return false
}

</script>
